<template>
  <div class="chat">
    <el-row class="chat-block">
      <el-col class="chat-left-block"
              :span="6">
        <div class="operate-block">
          <div class="search">
            <el-input v-model="orderId"
                      placeholder="请输入订单号"
                      @keydown.enter="searchOrderId"
                      clearable>
              <template #suffix>
                <Icon name="el-icon-Search"
                      color="#606266"
                      @click="searchOrderId" />
              </template>
            </el-input>
          </div>
          <div class="operate">
            <el-scrollbar>
              <el-check-tag v-for="(tag, i) in tags"
                            size="large"
                            :key="tag.value"
                            :checked="curTag == i"
                            @click="tagClick(tag)">{{ tag.label }}</el-check-tag>
            </el-scrollbar>
          </div>
        </div>
        <el-scrollbar class="chat-list"
                      v-if="chatList.list.length">
          <div v-infinite-scroll="loadConversation"
               :infinite-scroll-disabled="disabledLoading"
               :infinite-scroll-immediate="false">
            <el-row class="chat-item"
                    v-for="item in chatList.list"
                    :key="item.id"
                    @click="handleCurChat(item)"
                    :class="{ 'active': curChat.id == item.id }">
              <el-badge :value="item.conversations_unread_count"
                        :offset="[-8, 4]"
                        :hidden="item.conversations_unread_count == 0"
                        class="img-block">
                <el-image :src="item.buyer_avatar">
                  <template #error>
                    <div class="errorImg">
                      <Icon name="el-icon-PictureFilled"
                            color="#909399"
                            size="26" />
                    </div>
                  </template>
                </el-image>
              </el-badge>
              <div class="info-block">
                <div class="info-name-time">
                  <div class="name">{{ item.buyer_nickname }}</div>
                  <!-- <div class="unread"
                       v-if="item.conversations_reply == 1">Not replied</div> -->
                  <div class="time">{{ item.createdTime }}</div>
                </div>
                <div class="info-msg">
                  <div class="status"
                       v-if="item.conversations_unread_count > 0">未读</div>
                  <div class="lastMsg">{{ item.message_content }}</div>
                </div>
              </div>
            </el-row>
            <p v-if="isLoading">加载中...</p>
            <p v-if="isNoMore">没有更多了</p>
          </div>
        </el-scrollbar>
        <template v-else-if="!chatList.list.length && !isLoading">
          <el-empty description="暂无数据" />
        </template>
      </el-col>
      <el-col class="chat-middle-block">
        <template v-if="curChat.id">
          <div class="chat-title">
            <div class="name">{{ curChat.buyer_nickname }}</div>
          </div>
          <div class="history-list">
            <el-scrollbar class="chat-scroll">
              <el-divider v-if="noMore"
                          class="noMoreRow">已经到顶了</el-divider>
              <el-row v-if="loadingMore"
                      v-loading="loadingMore"
                      element-loading-text="加载中..."
                      element-loading-background="transparent"
                      class="loadingRow">
              </el-row>
              <template v-for="(history, n) in historyList.list"
                        :key="history.id">
                <el-row v-if="history.message_role == 'BUYER'"
                        class="left-row">
                  <div class="timerline"
                       v-if="history.createdTime && isShowTime(history.created_time, n)">{{ history.createdTime }}</div>
                  <div class="avatar-block">
                    <el-avatar :size="30"
                               :src="history.message_avatar">
                      <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                    </el-avatar>
                  </div>
                  <div class="msg-block"
                       v-html="history.content"></div>
                </el-row>
                <el-row v-else
                        class="right-row">
                  <div class="timerline"
                       v-if="history.createdTime && isShowTime(history.created_time, n)">{{ history.createdTime }}</div>
                  <div class="avatar-block">
                    <el-avatar :size="30"
                               :src="history.message_avatar">
                      <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                    </el-avatar>
                  </div>
                  <div class="msg-block"
                       v-html="history.content"></div>
                </el-row>
              </template>
            </el-scrollbar>
          </div>
          <div class="rich-text-editor"
               @keydown.enter.stop="sendMsg">
            <Toolbar class="Toolbar"
                     :editor="editorRef"
                     :defaultConfig="toolbarConfig"
                     :mode="mode" />
            <Editor class="Editor"
                    v-model="valueHtml"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="handleCreated"
                    @customPaste="handleCustomPaste" />
            <div class="sendBtn">
              <span class="tips">Enter 发送 ，Ctrl + Enter 换行</span>
              <el-popover :visible="tipShow"
                          placement="top"
                          content="不能发送空白信息">
                <template #reference>
                  <el-button type="primary"
                             @click="sendMsg"
                             :disabled="isLoading">发送</el-button>
                </template>
              </el-popover>
            </div>
          </div>
        </template>
        <template v-else>
          <el-empty :image="img"
                    description="开启客服聊天吧" />
        </template>
      </el-col>
      <el-col class="chat-right-block"
              :span="6"
              v-if="curChat.id">
        <el-tabs v-model="activeTab">
          <el-tab-pane name="orders"
                       :label="`Orders(1)`"></el-tab-pane>
        </el-tabs>
        <el-scrollbar class="order-detail-list"
                      v-if="orderDetail.order_info.order_id">
          <div>
            <div class="order-item">
              <div class="order-item-title">{{ orderDetail.order_info.order_status }}</div>
              <div class="order-item-info">
                <div class="orderId">
                  <span :title="orderDetail.order_info.order_id">{{ orderDetail.order_info.order_id }}</span>
                  <el-button :icon="CopyDocument"
                             link
                             :disabled="isLoading"
                             @click="copy(orderDetail.order_info.order_id)" />
                </div>
                <div class="orderTime"
                     :title="orderDetail.order_info.createdTime">{{ orderDetail.order_info.createdTime }}</div>
              </div>
              <div class="order-item-detail">
                <div class="title">Order detail</div>
                <div class="items">
                  <el-row class="item"
                          v-for="item in orderDetail.order_sku"
                          :key="item.id">
                    <div class="img-block">
                      <el-image :src="item.sku_image"
                                :preview-src-list="[item.sku_image]"
                                :hide-on-click-modal="true">
                        <template #error>
                          <div class="errorImg">
                            <Icon name="el-icon-PictureFilled"
                                  color="#909399"
                                  size="26" />
                          </div>
                        </template>
                      </el-image>
                    </div>
                    <div class="info-block">
                      <div class="name"
                           :title="item.product_name">{{ item.product_name }}</div>
                      <div class="size"
                           :title="item.sku_name">{{ item.sku_name }}</div>
                      <div class="sku-info"
                           :title="item.seller_sku">Seller SKU: {{ item.seller_sku }}</div>
                    </div>
                    <div class="price-block">
                      <div class="pirce"
                           :title="item.sale_price">${{ item.sale_price }}</div>
                      <div class="count">×1</div>
                    </div>
                  </el-row>
                </div>
                <div class="logistics">
                  <div class="logistics-title">
                    <div class="name">Logistics</div>
                    <div class="desc">Standard shipping</div>
                  </div>
                  <div class="logistics-operate">
                    <el-button link
                               type="success"
                               :disabled="isLoading"
                               @click="viewLogistics(orderDetail.order_info.order_id)">View</el-button>
                    <!-- <span>|</span>
                    <el-button link
                               type="success"
                               :disabled="isLoading"
                               @click="sendLogistics(orderDetail.order_info.order_id)">Send</el-button> -->
                  </div>
                </div>
                <div class="total">
                  <div class="total-title">
                    <div class="name">Total</div>
                    <div class="price"
                         :title="orderDetail.order_info.total_price">${{ orderDetail.order_info.total_price }}</div>
                  </div>
                  <!-- <div class="total-detail">CCDC</div> -->
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </el-col>
    </el-row>
    <!-- 查看物流信息弹窗 -->
    <LogisticsCom ref="logisticsCom" />
  </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'
import { onBeforeUnmount, ref, shallowRef, watch, nextTick, computed, onBeforeMount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IToolbarConfig, IEditorConfig , DomEditor, IDomEditor  } from '@wangeditor/editor'
import { getImList, getImInfo, uploadImg, sendText, messagesReadOperate, sendImage, getSkuInfo } from '/@/api/backend/customer/chat'
import img from '/@/assets/logon.jpg'
import { ElMessage } from 'element-plus'
import { CopyDocument } from '@element-plus/icons-vue'
import { copy, timeFormat } from '/@/utils/common'
import LogisticsCom from './logisticsCom.vue'
defineOptions({
    name: 'customer/chat',
})
// const test = () => {
//     const eles:any = document.querySelectorAll('.chat-scroll .el-row')
//     const ele = eles[eles.length - 1] as HTMLDivElement
//     ele.scrollIntoView({
//         block: 'end',
//         behavior: 'smooth'
//     })
// }
// 客户订单详情板块切换
const activeTab = ref('orders')
// 发送空信息的提示
const tipShow = ref(false)
const showTip = () => {
    tipShow.value = true
    const timer = setTimeout(() => {
        tipShow.value = false
        clearTimeout(timer)
    } , 1.5 * 1000)
}
// 会话列表
const chatList = ref({
    list: [] as any[],
    page: 1,
    limit: 20,
    total: 0
})
// 当前选中会话
const curChat = ref({} as anyObj)
// 消息历史记录列表
const historyList = ref({
    list: [] as any[],
    page: 1,
    limit: 20,
    total: 0
})
// 搜索订单号
const orderId = ref('')
const searchOrderId = () => {
    loadConversation(true, orderId.value)
}
// 会话筛选值
const tags = [
    {
        label: '全部',
        value: 0
    },
    {
        label: '已读',
        value: 1
    },
    {
        label: '未读',
        value: 2
    }
]
const curTag = ref(0)
const tagClick = (tag:any) => {
    curTag.value = tag.value
    loadConversation(true)
}
// 选择会话对象
const handleCurChat = (item:any) => {
    if(curChat.value.id == item.id) return
    curChat.value = item
    if(curChat.value.conversations_unread_count > 0) setRead()
}
// 消息记录加载相关
const loadScroll = ref()
const loadingMore = ref(false)
const noMore = ref(false)
// 编辑器相关
const editorRef = shallowRef()
const toolbarRef = shallowRef()
const valueHtml = ref('')
const mode = 'simple'
type InsertFnType = (url: string, alt: string, href: string) => void
const toolbarConfig: Partial<IToolbarConfig> = {
    toolbarKeys: [
        'emotion',
        'uploadImage'
    ]
}
const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            customUpload(file: any, insertFn: InsertFnType) {  // TS 语法
                let fd = new FormData()
                fd.append('file', file)
                uploadImg(fd).then((res:any) => {
                    if(res.code == 200) {
                        insertFn(res.data, '', '')
                    } else {
                        ElMessage({
                            type: 'error',
                            message: res.msg
                        })
                    }
                })
            }
        }
    },
    hoverbarKeys: {
        'image': {
            menuKeys: [],
        }
    }
}
// 自定义粘贴内容 为了保留粘贴的格式
const handleCustomPaste = (editor: IDomEditor, event: ClipboardEvent, callback: Function) => {
    const clipboardData = event.clipboardData?.getData('text')
    if(clipboardData) {
        editorRef.value.dangerouslyInsertHtml(clipboardData)
        event.preventDefault()
        callback(false)
        return false
    }
    callback(true)
    return true
}
// 创建编辑器
const handleCreated = (editor:any) => {
    // 记录 editor 实例，重要！  
    editorRef.value = editor
    nextTick(() => {
        // 记录toolbar 实例
        toolbarRef.value = DomEditor.getToolbar(editor)
    })
}
// 发送消息
const sendMsg = (e:any) => {
    if(tipShow.value) return
    if(editorRef.value.isEmpty()) return showTip()
    if(!e.ctrlKey && e.key == 'Enter' || e.type == 'click') {
        const imgs = editorRef.value.getElemsByType('image')
        const index = chatList.value.list.findIndex((v:any) => v.id == curChat.value.id)
        const item = chatList.value.list.splice(index, 1)[0]
        item.created_time = getNowTime()
        item.createdTime = setTime(item.created_time, 2)
        item.conversations_reply = 2
        let params = {
            order_id: item.order_id,
            shop_id: item.shop_id,
            conversation_id: item.conversation_id,
            id: historyList.value.list.length + 1,
            message_role: item.customer_role,
            message_avatar: item.customer_avatar,
            created_time: item.created_time,
            createdTime: item.createdTime
        } as anyObj
        // 发送时本地直接更新数据
        if(imgs.length) {
            params.content = editorRef.value.getHtml()
            item.message_content = editorRef.value.getElemsByType('image')[0].src
            params['url'] = editorRef.value.getElemsByType('image')[0].src
            try {
                sendImage(params)
            } catch(err) {
                console.log(err)
            }
        } else {
            params.content = editorRef.value.getText()
            item.message_content = editorRef.value.getText()
            params['txt'] = editorRef.value.getText()
            try {
                sendText(params)
            } catch(err) {
                console.log(err)
            }
        }
        chatList.value.list.unshift(item)
        curChat.value = item
        historyList.value.list.push(params)
        editorRef.value.clear()
        nextTick(() => {
            const { clientHeight, scrollHeight } = loadScroll.value
            loadScroll.value.scrollTop = scrollHeight - clientHeight
            editorRef.value.focus()
            const ele = document.querySelector('.chat-list .el-scrollbar__wrap') as HTMLDivElement
            ele.scrollTop = 0
        })
    }
}
// 获取当前美国时区时间
const getNowTime = () => {
    const now = new Date(new Date().getTime() - 15 * 60 * 60 * 1000)
    const year = now.getFullYear().toString()
    const month = (now.getMonth() + 1).toString().padStart(2, '0')
    const date = now.getDate().toString().padStart(2, '0')
    const hours = now.getHours().toString().padStart(2, '0')
    const minutes = now.getMinutes().toString().padStart(2, '0')
    const seconds = now.getSeconds().toString().padStart(2, '0')
    return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
}
// 消息记录滚动条到顶时加载
const scrollToTop = (el:any) => {
    if(!loadingMore.value && !noMore.value && loadScroll.value.scrollTop == 0) {
        loadMore()
    }
    if(loadingMore.value) loadScroll.value.scrollTop = 0
}
// 消息记录时间间隔小于1分钟不显示
const isShowTime = (time:string, index:number) => {
    const obj = historyList.value.list[index - 1]
    if(!obj) return true
    const times = (new Date(time).getTime() - new Date(obj.created_time).getTime()) / (1000 * 60)
    return times > 1
}
const weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November', 'December']
// 设置时间显示
const setTime = (time:string, type: number = 1) => {
    if(time) {
        const newTime = time.substring(5, 16)
        const now = new Date()
        const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0).getTime()
        const setTime = new Date(time).getTime()
        const times = todayStart - setTime
        const h = new Date(time).getHours()
        const day = new Date(time).getDay()
        const month = new Date(time).getMonth()
        const date = new Date(time).getDate()
        const ms = newTime.split(' ')[1].substring(2)
        const hms =  h < 12 ? `${h == 0 ? 12 : h}${ms} AM` : `${h == 12 ? h : h - 12}${ms} PM`
        if(times <= 0) {
            return hms
        } else if(Math.round(times / (1000 * 60 * 60)) <= 24) {
            return type == 1 ? 'yesterday' : `yesterday, ${hms}`
        } else if(Math.round(times / (1000 * 60 * 60)) <= 24 * 7){
            return type == 1 ? weeks[day] : `${weeks[day]}, ${hms}`
        }
        return type == 1 ? `${months[month]} ${date}` : `${months[month]} ${date} ${hms}`
    }
    return time
}
// 消息记录加载
const loadMore = (init:boolean = false) => {
    const { conversation_id, order_id } = curChat.value
    const scrollEl = document.querySelector('.chat-scroll .el-scrollbar__view') as HTMLDivElement
    const originHeight = scrollEl.scrollHeight
    loadingMore.value = true
    if(init) {
        historyList.value.page = 1
        historyList.value.total = 0
        historyList.value.list = []
        noMore.value = false
    } else {
        historyList.value.page += 1
    }
    const { page, limit } = historyList.value
    getImInfo({ conversation_id, order_id, page, limit }).then((res:any) => {
        if(res.data && conversation_id == curChat.value.conversation_id ) {
            res.data.list.forEach((v:any) => {
                v.createdTime = setTime(v.created_time, 2)
                historyList.value.list.unshift(v)
            })
            historyList.value.total = res.data.total
            if(historyList.value.list.length >= historyList.value.total && historyList.value.total != 0) {
                noMore.value = true
            }
            nextTick(() => {
                // 设置加载完后滚动条位子
                if(init) {
                    const { clientHeight, scrollHeight } = loadScroll.value
                    loadScroll.value.scrollTop = scrollHeight - clientHeight
                    const timer = setTimeout(() => {
                        loadScroll.value.scrollTop = scrollHeight - clientHeight
                        clearTimeout(timer)
                    } , 0)
                } else {
                    loadScroll.value.scrollTop = scrollEl.scrollHeight - originHeight - 30
                }
            })
        }
    }).finally(() => {
        loadingMore.value = false
    })
}
// 切换会话对象
const watchCurChat = watch(
    () => curChat.value.id,
    (newVal) => {
        if(!newVal) {
            loadScroll.value.removeEventListener('scroll', scrollToTop)
            loadScroll.value = '' 
        }
        nextTick(() => {
            if(newVal) {
                editorRef.value.focus()
                if(!loadScroll.value) {
                    loadScroll.value = document.querySelector('.chat-scroll .el-scrollbar__wrap')
                    loadScroll.value.addEventListener('scroll', scrollToTop)
                }
                loadMore(true)
                getOrderDetails(curChat.value.order_id)
            }
        })
    }
)
// 未读状态改变
const setRead = () => {
    const params = {
        shop_id: curChat.value.shop_id,
        conversation_id: curChat.value.conversation_id
    }
    messagesReadOperate(params).then((res:any) => {
        if(res.code == 200) {
            curChat.value.conversations_unread_count = 0
        }
    })
}
// 会话列表加载
const isLoading = ref(false)
const isNoMore = computed(() => chatList.value.list.length >= chatList.value.total)
const disabledLoading = computed(() => isLoading.value || isNoMore.value)
const loadConversation = (init:boolean = false, order_id: number | string = '') => {
    isLoading.value = true
    editorRef.value && editorRef.value.disable()
    if(init) {
        chatList.value.page = 1
        chatList.value.total = 0
        chatList.value.list = []
    } else {
        chatList.value.page += 1
    }
    const { page, limit } = chatList.value
    getImList({ page, limit, unread_count: curTag.value, order_id }).then((res) => {
        if(res.data) {
            if(init) {
                res.data.list.forEach((v:any) => {
                    v.createdTime = setTime(v.created_time)
                })
                chatList.value.list = res.data.list
                if(curChat.value.id) {
                    const item = chatList.value.list.find((v:any) => v.id == curChat.value.id)
                    if(item) {
                        curChat.value = item
                    } else {
                        curChat.value = {}
                    }
                }
            } else {
                res.data.list.forEach((v:any) => {
                    v.createdTime = setTime(v.created_time)
                    chatList.value.list.push(v)
                })
            }
            chatList.value.total = res.data.total
        }
    }).finally(() => {
        editorRef.value && editorRef.value.enable()
        isLoading.value = false
    })
}
// 获取客户订单明细
const orderDetail = ref({
    order_info: {} as anyObj,
    order_sku: [] as any[]
} as anyObj)
const getOrderDetails = (order_id: string) => {
    orderDetail.value = {
        order_info: {} as anyObj,
        order_sku: [] as any[]
    } as anyObj
    getSkuInfo({order_id}).then((res:any) => {
        if(res.code == 200) {
            res.data.order_info.createdTime = timeFormat(res.data.order_info.created_time, 'yyyy/mm/dd hh:MM:ss')
            if(res.data.order_sku && res.data.order_sku.length) {
                res.data.order_sku.forEach((v:any) => {
                    v.createTime = timeFormat(v.createdtime, 'yyyy/mm/dd hh:MM:ss')
                })
            }
            orderDetail.value = res.data
        }
    })
}
// 查看物流状态
const logisticsCom:any = ref<InstanceType<typeof LogisticsCom>>()
const viewLogistics = (order_id: string) => {
    logisticsCom.value.orderId = order_id
    logisticsCom.value.show = true
}
const sendLogistics = (order_id: string) => {
    console.log('sendLogistics', order_id)
}
onBeforeMount(() => {
    loadConversation(true)
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    if(loadScroll.value) loadScroll.value.removeEventListener('scroll', scrollToTop)
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
</script>

<style scoped lang="scss">
.ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat{
    &:deep(.logisticsCom){
        padding: 16px 30px;
        min-width: 500px;
    }
    padding: 30px;
    height: calc(100vh - 50px);
    .chat-block{
        height: 100%;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    }
    .chat-left-block{
        background-color: #fff;
        height: 100%;
        overflow: hidden;
        .operate-block{
            padding: 20px 15px;
            .search{
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                :deep(.el-input){
                    width: 100%;
                    .el-input__wrapper{
                        height: 40px;
                    }
                    .el-input__suffix{
                        cursor: pointer;
                    }
                }
            }
            .operate{
                white-space: nowrap;
                :deep(.el-check-tag + .el-check-tag){
                    margin-left: 10px;
                }
            }
            .search + .operate{
                margin-top: 20px;
            }
        }
        .chat-list{
            height: calc(100% - 128px);
            p{
                text-align: center;
                line-height: 30px;
                color: #909399;
                padding: 5px 0;
            }
            .chat-item{
                cursor: default;
                border-bottom: 1px solid #f5f5f5;
                padding: 15px;
                &:hover, &.active{
                    background-color: #f5f5f5;
                }
                .img-block{
                    width: 50px;
                    height: 50px;
                    .el-image{
                        overflow: hidden;
                        border-radius: 50%;
                        width: 100%;
                        height: 100%;
                        .errorImg{
                            background-color: #ededed;
                            height: 100%;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
                .info-block{
                    width: calc(100% - 60px);
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    justify-content: space-between;
                    .info-name-time{
                        width: 100%;
                        display: flex;
                        flex-wrap: nowrap;
                        align-items: center;
                        .name{
                            flex: 1;
                            color: #333;
                            @extend .ellipsis;
                        }
                        .unread{
                            flex: 0 0 24%;
                            color: #b88230;
                            background-color: #f8e3c5;
                            padding: 2px;
                            border-radius: 2px;
                            @extend .ellipsis;
                        }
                        .time{
                            color: #909399;
                            flex: 0 0 30%;
                            text-align: right;
                            @extend .ellipsis;
                        }
                    }
                    .info-msg{
                        width: 100%;
                        display: flex;
                        flex-wrap: nowrap;
                        align-items: center;
                        .status{
                            border: 1px solid #ccc;
                            border-radius: 3px;
                            padding: 0 2%;
                            flex: 0 0 10%;
                            white-space: nowrap;
                            background-color: #f5f5f5;
                            color: #909399;
                        }
                        .lastMsg{
                            flex: 1;
                            color: #909399;
                            @extend .ellipsis;
                        }
                        .status + .lastMsg{
                            margin-left: 2%;
                        }
                    }
                }
                .img-block + .info-block{
                    margin-left: 10px;
                }
            }
        }
    }
    .chat-middle-block{
        height: 100%;
        color: #333;
        flex: 1;
        .chat-title{
            height: 60px;
            padding: 0 15px;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            border-bottom: 1px solid #ddd;
        }
        .history-list{
            height: calc(100% - 60px - 300px);
            overflow: hidden;
            .chat-scroll{
                padding: 0 15px;
                :deep(.el-scrollbar__view){
                    padding: 15px 0;
                }
                .noMoreRow{
                    :deep(.el-divider__text){
                        background-color: var(--ba-bg-color);
                        color: #909399;
                    }
                }
                .loadingRow{
                    height: 30px;
                    :deep(.el-loading-spinner){
                        top: initial;
                        margin-top: initial;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-right: 30px;
                        .circular{
                            width: 25px;
                            height: 25px;
                        }
                        .el-loading-text{
                            color: #909399;
                        }
                        circle{
                            stroke: #909399
                        }
                        .circular + .el-loading-text{
                            margin-left: 10px;
                        }
                    }
                }
            }
            .el-row + .el-row{
                margin-top: 20px;
            }
            .timerline{
                width: 100%;
                text-align: center;
                color: #909399;
                margin: 0 0 20px;
            }
            .msg-block{
                padding: 15px;
                background-color: #fff;
                border-radius: 8px;
                max-width: 70%;
                word-break: break-all;
                white-space: pre-wrap;
                line-height: 1.5;
            }
            .avatar-block + .msg-block{
                margin-left: 10px;
            }
            .right-row{
                flex-direction: row-reverse;
                .avatar-block + .msg-block{
                    margin-right: 10px;
                    margin-left: 0;
                }
            }
        }
        .rich-text-editor{
            height: 300px;
            margin: 0 15px;
            border-radius: 20px 20px 0 0;
            overflow: hidden;
            .Toolbar{
                border-bottom: 1px solid #ccc;
            }
            .Editor{
                height: calc(100% - 40px - 50px) !important;
            }
            :deep(.w-e-drop-panel){
                height: 200px;
                .w-e-panel-content-emotion{
                    height: 100%;
                    overflow-y: scroll;
                }
            }
            :deep(.w-e-select-list){
                max-height: 200px;
            }
            .sendBtn{
                height: 50px;
                padding: 5px 16px 5px 0;
                width: 100%;
                color: #aaa;
                text-align: right;
                background-color: #fff;
                .tips{
                    vertical-align: middle;
                }
                .el-button{
                    margin-left: 10px;
                    width: 100px;
                    height: 40px;
                    font-size: 16px;
                }
            }
        }
        :deep(.el-empty){
            height: 100%;
            .el-empty__image{
                width: 300px;
            }
            .el-empty__description p{
                font-size: 16px;
            }
        }
    }
    .chat-right-block{
        height: 100%;
        background-color: #fff;
        padding: 0 15px;
        &:deep(.el-tabs){
            .el-tabs__nav-wrap::after{
                display: none
            }
            .el-tabs__item{
                font-weight: bold;
            }
        }
        .order-detail-list{
            height: calc(100% - 54px);
            :deep(.el-scrollbar__view){
                padding-bottom: 15px;
            }
            .order-item{
                border-radius: 4px;
                padding: 10px;
                border: 1px solid #d5d5d5;
                overflow: hidden;
                .order-item-title{
                    position: relative;
                    text-indent: 15px;
                    font-weight: bold;
                    &::before{
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 0px;
                        transform: translateY(-50%);
                        background-color: var(--el-color-primary);
                        height: 5px;
                        width: 5px;
                        border-radius: 50%;
                    }
                    & + .order-item-info{
                        margin-top: 15px;
                    }
                }
                .order-item-info{
                    color: #73767a;
                    display: flex;
                    justify-content: space-between;
                    .orderId{
                        flex: 0 0 48%;
                        max-width: 48%;
                        display: flex;
                        align-items: center;
                        span{
                            @extend .ellipsis;
                        }
                        .el-icon{
                            margin-left: 2%;
                            flex: 0 0 10%;
                        }
                    }
                    .orderTime{
                        flex: 0 0 48%;
                        max-width: 48%;
                        text-align: right;
                        @extend .ellipsis;
                    }
                    & + .order-item-detail{
                        margin-top: 30px;
                    }
                }
                .order-item-detail{
                    border-radius: 4px;
                    border: 1px solid #d5d5d5;
                    background-color: #f5f5f5;
                    & > div {
                        padding: 10px;
                    }
                    .title{
                        font-weight: bold;
                        line-height: 30px;
                        & + .items{
                            border-top: 1px solid #eee;
                        }
                    }
                    .items{
                        color: #73767a;
                        padding: 0 10px;
                        .item{
                            cursor: default;
                            padding: 10px 0;
                            .img-block{
                                width: 50px;
                                height: 50px;
                                border-radius: 4px;
                                overflow: hidden;
                                .el-image{
                                    width: 100%;
                                    height: 100%;
                                    .errorImg{
                                        background-color: #ededed;
                                        height: 100%;
                                        width: 100%;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }
                                }
                                & + .info-block{
                                    margin-left: 10px;
                                }
                            }
                            .info-block{
                                width: calc(100% - 20% - 60px);
                                font-size: 12px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                .name{
                                    color: #333;
                                    font-weight: bold;
                                    font-size: 14px;
                                    @extend .ellipsis;
                                }
                                .size{
                                    @extend .ellipsis;        
                                }
                                .sku-info{
                                    @extend .ellipsis;
                                }
                            }
                            .price-block{
                                flex: 0 0 20%;
                                max-width: 20%;
                                text-align: right;
                                .pirce{
                                    color:#333;
                                    font-weight: bold;
                                    @extend .ellipsis;
                                }
                                .count{
                                    @extend .ellipsis;
                                }
                            }
                        }
                        & + .logistics{
                            border-top: 1px solid #eee;
                        }
                    }
                    .logistics{
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .logistics-title{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .name{
                                color: #73767a;
                                @extend .ellipsis;
                            }
                            .desc{
                                color: #333;
                                font-weight: bold;
                                @extend .ellipsis;
                            }
                        }
                        .logistics-operate{
                            text-align: right;
                            display: flex;
                            align-items: center;
                            justify-content: end;
                            & > span{
                                font-size: 10px;
                                color: #ddd;
                                transform: translateY(-1.5px);
                            }
                            .el-button{
                                font-size: 12px;
                                font-weight: bold;
                            }
                            .el-button.is-link{
                                margin: 0 10px;
                            }
                        }
                        & + .total{
                            border-top: 1px solid #eee;
                        }
                    }
                    .total{
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        color: #73767a;
                        .total-title{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .name{
                                @extend .ellipsis;
                            }
                            .price{
                                color: #333;
                                font-weight: bold;
                                @extend .ellipsis;
                            }
                        }
                        .total-detail{
                            text-align: right;
                        }
                    }
                }
            }
            .order-item + .order-item{
                margin-top: 15px;
            }
        }
    }
}
</style>